<!-- 概览 -->
<template>
	<el-scrollbar>
		<div class="view-overview">
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<yesterday-overview />
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<active-trends />
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<income-trends />
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<access-trends />
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<share-trends />
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :lg="24" :md="24" :xs="24">
					<div class="card">
						<retention-trends />
					</div>
				</el-col>
			</el-row>
		</div>
	</el-scrollbar>
</template>

<script lang="ts" name="overview" setup>
import YesterdayOverview from './components/yesterday-overview.vue';
import ActiveTrends from './components/active-trends.vue';
import IncomeTrends from './components/income-trends.vue';
import AccessTrends from './components/access-trends.vue';
import ShareTrends from './components/share-trends.vue';
import RetentionTrends from './components/retention-trends.vue';
</script>

<style lang="scss">
.view-overview {
	overflow-x: hidden;

	.card {
		background-color: #fff;
		border-radius: 6px;
		margin-bottom: 15px;
		letter-spacing: 0.5px;
		color: #000;
		line-height: 1;

		&__header {
			font-size: 15px;
			display: flex;
			align-items: center;
			font-weight: 700;
			height: 50px;
			padding: 0 20px;
		}

		&__container {
			padding: 0 20px 20px;
		}
	}
}
</style>
